<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true">
      <el-form-item label="店铺名称" prop="cusname">
        <el-input
          v-model="queryParams.cusname"
          placeholder="请输入店铺名称"
          clearable
          size="small"
          style="width: 240px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
<!--      <el-form-item label="客户分组" prop="groupId">-->
<!--        <treeselect-->
<!--          v-model="queryParams.groupId"-->
<!--          :options="groupOptions"-->
<!--          :normalizer="normalizer"-->
<!--          :show-count="true"-->
<!--          style="width: 240px;"-->
<!--          class="vueTreeSelectSmall"-->
<!--          placeholder="请选择客户分组"-->
<!--        />-->
<!--      </el-form-item>-->
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          icon="el-icon-plus"
          size="mini"
          @click="handleClaimCustom"
        >认领客户</el-button>
      </el-col>
    </el-row>

    <el-table v-loading="loading" :data="customList" @selection-change="handleSelectionChange" border>
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="序号" align="center" type="index" width="50" fixed></el-table-column>
      <el-table-column label="平台类型" prop="platformType" :show-overflow-tooltip="true" align="center" :formatter="platformTypeFormat" />
      <el-table-column label="店铺名称" prop="cusname" :show-overflow-tooltip="true" header-align="center" />
      <el-table-column label="旺旺号" prop="aliww" :show-overflow-tooltip="true" header-align="center" />
      <el-table-column label="所属类目" prop="groupName" :show-overflow-tooltip="true" width="230" align="left" header-align="center" />
      <el-table-column label="放弃原因" prop="reason" align="left" header-align="center"/>
      <el-table-column label="创建时间" align="center" prop="createTime" width="180" header-align="center">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleView(scope.row)"
          >详情</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <el-dialog :title="title" :visible.sync="openViewDialog" width="900px" append-to-body>
      <el-form ref="customForm" :model="customForm" label-width="100px">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>来源信息</span>
          </div>
          <el-row :gutter="10">
            <el-col :span="12">
              <el-form-item label="客户来源" prop="sourceType">
                <el-select v-model="customForm.sourceType" disabled placeholder="请选择客户来源" style="width: 100%">
                  <el-option
                    v-for="dict in sourceOptions"
                    :key="dict.dictValue"
                    :label="dict.dictLabel"
                    :value="dict.dictValue"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12"  v-if="customForm.sourceType==='2'">
              <el-form-item label="新媒体平台" prop="merchatPlatform">
                <el-select v-model="customForm.merchantPlatform" disabled placeholder="请选择平台类型" style="width: 100%">
                  <el-option
                    v-for="dict in newMediaPlatOptions"
                    :key="dict.dictValue"
                    :label="dict.dictLabel"
                    :value="dict.dictValue"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12"  v-if="customForm.sourceType==='1'">
              <el-form-item label="微信账号" prop="wechatNo">
                <el-input v-model="customForm.wechatNo" disabled placeholder="请填写微信账号" style="width: 100%">
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row v-if="customForm.sourceType==='2'" :gutter="10">
            <el-col :span="12">
              <el-form-item label="商家账号" prop="merchantAccount">
                <el-input v-model="customForm.merchantAccount" disabled placeholder="请输入商家账号" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="商家电话" prop="merchantTel">
                <el-input v-model="customForm.merchantTel" disabled placeholder="请输入商家电话" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>
        <el-card class="box-card"  style="margin-top: 10px">
          <div slot="header" class="clearfix">
            <span>客户信息</span>
          </div>
          <el-row :gutter="10">
            <el-col :span="24">
              <el-form-item label="店铺名称" prop="cusname">
                <el-input v-model="customForm.cusname" disabled placeholder="请输入店铺名称" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="12">
              <el-form-item label="平台类型" prop="platformType">
                <el-select v-model="customForm.platformType" disabled placeholder="请选择平台类型" style="width: 275px">
                  <el-option
                    v-for="dict in platformOptions"
                    :key="dict.dictValue"
                    :label="dict.dictLabel"
                    :value="dict.dictValue"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="旺旺号" prop="aliww">
                <el-input v-model="customForm.aliww" clearable placeholder="请输入旺旺号" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="所属类目" prop="group">
                <el-input v-model.trim="customForm.groupName" disabled placeholder="请填写所属类目"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="24">
              <el-form-item label="公司名称" prop="company">
                <el-input v-model="customForm.company" disabled placeholder="请输入公司名称" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>
        <el-card class="box-card" style="margin-top: 10px">
          <div slot="header" class="clearfix">
            <span>联系人信息</span>
          </div>
          <el-table v-loading="loading" :data="customForm.contacts" border>
            <el-table-column label="序号" type="index" width="50" align="center" />
            <el-table-column label="姓名" prop="name" min-width="120" align="center" />
            <el-table-column label="性别" prop="sex" width="80" align="center" :formatter="sexFormat"/>
            <el-table-column label="联系电话" prop="tel" min-width="150" align="center" />
          </el-table>
        </el-card>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import Treeselect from '@riophae/vue-treeselect'
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import {
  abandonCustom,
  claimCustom,
  getCustomInfo,
  listCustom,
  selectNotAllocatedCustomList
} from '@/api/custom/custom'
import { listGroup } from '@/api/custom/group/group'

export default {
  name: 'Highsea',
  components: { Treeselect },
  data(){
    return{
      // 遮罩层
      loading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 总条数
      total: 0,
      // 客户列表
      customList: [],
      // 弹出层标题
      title: '',
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        cusname: '',
        groupId: undefined
      },
      // 分组列表
      groupList: [],
      // 分组树选项
      groupOptions: [],
      // 客户等级选项
      levelOptions:[],
      platformOptions: [],
      // 所属行业选项
      industryOptions: [],
      // 性别选项
      sexOptions: [],
      openViewDialog: false,
      customForm: {},
      props: { multiple: true },
      group_props: { multiple: false },
      sourceOptions:[],
      newMediaPlatOptions: []
    }
  },
  created() {
    this.getTreeselect()
    this.getDicts("custom_platform").then(response => {
      this.platformOptions = response.data;
    })
    this.getDicts("custom_level").then(response => {
      this.levelOptions = response.data;
    })
    this.getDicts("custom_industry").then(response => {
      this.industryOptions = response.data;
    })
    this.getDicts("sys_user_sex").then(response => {
      this.sexOptions = response.data;
    })
    this.getDicts("follow_type").then(response => {
      this.followMehtodOptions = response.data
    })
    this.getDicts("custom_source").then(response => {
      this.sourceOptions = response.data;
    })
    this.getDicts("new_media_platform").then(response => {
      this.newMediaPlatOptions = response.data;
    })
    this.getList()
  },
  methods: {
    // 查询
    handleQuery() {
      this.queryParams.page = 1;
      this.getList();
    },
    // 查询方法
    getList() {
      this.loading = true;
      selectNotAllocatedCustomList(this.queryParams).then(response => {
        console.log('ss = ' + JSON.stringify(response))
          this.customList = response.rows
          this.total = response.total;
          this.loading = false;
        }
      );
    },
    // 重置查询条件
    resetQuery() {

    },
    // 客户等级格式化
    levelFormat(row) {
      return this.selectDictLabel(this.levelOptions, row.level);
    },

    // 平台类型格式化
    platformTypeFormat(row) {
      return this.selectDictLabel(this.platformOptions, row.platformType);
    },
    // 客户分组格式化
    groupFormat(row) {
      var group = this.groupOptions.find(item => item.id === row.groupId)
      if(group === undefined || group == null){
        return '主类目'
      }

      return group.groupName
    },
    // 所属行业格式化
    industryFormat(row) {
      var industryItem = this.industryOptions.find(item => item.dictValue === row.industry)
      if(industryItem === undefined) {
        return ''
      }
      return industryItem.dictLabel
    },
    // 分配状态格式化
    allocationStatusFormat(row) {
      if(row.allocationStatus === "1") {
        return '已分配'
      } else {
        return '未分配'
      }
    },
    // 客户状态格式化
    statusFormat(row) {
      if(row.status === '0') {
        return '资源'
      } else if(row.status === '1') {
        return '意向'
      } else if(row.status === '2') {
        return '签约'
      } else if(row.status === '3') {
        return '沉默'
      } else if(row.status === '4') {
        return '流失'
      } else {
        return '未知'
      }
    },
    // 性别格式化
    sexFormat(row) {
      if(row.sex === '0') {
        return '男'
      } else if(row.sex === '1') {
        return '女'
      } else {
        return '未知'
      }
    },
    // 转换菜单数据结构
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.id,
        label: node.groupName,
        children: node.children
      };
    },
    // 查询分组下拉树结构
    getTreeselect() {
      listGroup().then(response => {
        this.groupList = response.data
        //this.groupOptions = this.handleTree(response.data, "id");
        let groups = []

        response.data.forEach(item => {
          let data = {}
          data.value = item.id
          data.label = item.groupName
          data.parentId = item.parentId
          groups.push(data)
        })
        this.groupOptions = this.handleTree(groups, "value");
      });
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length!=1
      this.multiple = !selection.length
    },
    // 认领客户
    handleClaimCustom() {
      if(this.ids.length === 0) {
        this.msgError('请选择要认领的客户！')
        return
      }
      const that = this
      this.$confirm('是否确认认领以下客户？', "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function() {
        return claimCustom(that.ids)
      }).then(response => {
        this.getList()
        this.msgSuccess("操作成功");
      })
    },
    // 转换菜单数据结构
    group_normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.id,
        label: node.groupName,
        children: node.children
      };
    },
    handleView(row){
      getCustomInfo(row.id).then(response => {
        if(response.code === 200) {
          this.customForm = response.data;
          this.openViewDialog = true;
          this.title = '查看客户详情'
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">

</style>
